<template>
    <view>
        <!-- pages/mealdetails/index.wxml -->
        <view class="page">
            <view class="bg">
                <image :src="imgUrl + 'mealbg.png'"></image>
                <view class="flexbox">
                    <view class="flexleft">
                        <view class="text1" v-if="mealObj.servicePackage.type == 1">{{ mealObj.serviceName }}次卡{{ mealObj.totaltimes }}次</view>
                        <view class="text1" v-if="mealObj.servicePackage.type == 2">{{ mealObj.serviceName }}{{ mealObj.totaltimes }}次</view>
                        <view class="text2">可用次数：{{ mealObj.stocktimes }}次</view>
                        <view class="text3">
                            <text>
                                <text class="money">¥</text>
                                {{ mealObj.servicePackage.price }}
                            </text>
                            <text>原价¥{{ mealObj.servicePackage.costprice }}</text>
                        </view>
                    </view>
                    <view class="flexright">
                        <view class="headerbox" @tap="toHairstylistdetails" :data-item="mealObj">
                            <view class="header"></view>
                            <image :src="imgUrl + 'header.png'"></image>
                        </view>
                        <view class="text4">仅{{ mealObj.stylistName }}发型师可用</view>
                    </view>
                </view>
            </view>
            <view class="details">
                <view class="title">套餐详情：</view>
                <view class="detailsfelx">
                    <text>发型师：</text>
                    <text>{{ mealObj.stylistName }}</text>
                </view>
                <view class="detailsfelx">
                    <text>套餐类型：</text>
                    <text>{{ mealObj.servicePackage.type < 2 ? '单项套餐' : '多项套餐' }}</text>
                </view>
                <view :class="mealObj.servicePackage.type < 2 ? 'detailsfelx' : 'contentliquid'">
                    <text>套餐项目：</text>
                    <text>{{ mealObj.packageContentLiquid }}</text>
                </view>
                <view class="detailsfelx">
                    <text>可用次数：</text>
                    <text id="textcolor">{{ mealObj.stocktimes }}次</text>
                </view>
                <view class="detailsfelx">
                    <text>有效期限：</text>
                    <text id="textcolor">永久有效</text>
                </view>
            </view>
            <view v-if="showstutas" class="time1">
                <text>套餐剩余次数：</text>
                <text>{{ mealObj.stocktimes }}次</text>
            </view>
            <view v-else class="time2">
                <view class="flexbox1">
                    <text>套餐剩余次数：</text>
                    <text>{{ mealObj.stocktimes }}次</text>
                </view>
                <view>使用记录（已使用{{ mealObj.usetimes }}次）</view>
                <view>
                    <view v-if="index <= showLength" class="flexbox2" v-for="(item, index) in timelist" :key="index">
                        <text>{{ item.storeName }}</text>

                        <text>{{ item.creatTime }}</text>
                    </view>
                </view>

                <view v-if="showLength < timelist.length" class="more" @tap="showmore">点击查看更多</view>
                <view v-if="showLength == timelist.length" class="more" @tap="showmuch">点击收起</view>
            </view>
            <view class="explain">
                <view class="explaintext">使用说明：</view>
                <view>
                    <view class="explaintext1">套餐有效期</view>
                    <view class="explaintext2">套餐自购买成功开始生效，有效期：永久有效</view>
                </view>
                <view>
                    <view class="explaintext1">使用说明</view>
                    <view class="explaintext2">在个人中心优惠券中使用套餐券直接下单预约</view>
                </view>
                <view>
                    <view class="explaintext1">规则提醒</view>
                    <view class="explaintext2">1、购买套餐不支持优惠券；</view>
                    <view class="explaintext2">2、套餐购买成功后，将以套餐券的形式发放至账户个人中心优惠券中</view>
                    <view class="explaintext2">3、预约美发师下单，每次仅能使用一张套餐券，套餐仅限该美发师使用</view>
                </view>
                <view>
                    <view class="explaintext1">退款须知：</view>
                    <view class="explaintext2">1、本套餐券支持退款</view>
                    <view class="explaintext2">2、若无使用，则按支付价格全部退回；…</view>
                    <view class="explaintext2">3、预约美发师下单，每次仅能使用一张套餐券…</view>
                </view>
            </view>
            <view class="btn" @tap="toHair" :data-item="mealObj">去使用</view>
            <view class="btn" :data-id="mealObj.id" @tap="onRefund" v-if="mealObj.usetimes == 0">退款</view>
        </view>
        <van-popup round :show="show" position="bottom" @close="onClose">
            <view class="popuptext">
                使用记录
                <van-icon size="20px" name="close" @tap.native="onClose" class="close" />
            </view>
            <view class="flexbox2 p-30" v-for="(item, index) in timelist" :key="index">
                <text>{{ item.storeName }}</text>

                <text>{{ item.creatTime }}</text>
            </view>
            <view class="p-20"></view>
        </van-popup>
        <!-- <tabbar activeIdx="0"></tabbar> -->
    </view>
</template>

<script>
// pages/mealdetails/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            marginBottom: app.globalData.marginBottom,
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            showstutas: false,

            mealObj: null,
            timelist: [],
            showLength: 4,
            show: false,
            type: 0,
            costprice: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let data = JSON.parse(decodeURIComponent(options.data));
        this.setData({
            mealObj: data
        });

        _request
            .get('/userCoupon/getPackageUseByUserIdAndPackageId', {
                id: data.id,
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    timelist: res.data.data
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            });
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 展示更多
        showmore() {
            this.setData({
                showLength: this.timelist.length
            });
        },

        // 展示5条
        showmuch() {
            this.setData({
                showLength: 4
            });
        },

        // 跳转理发师详情
        toHair(e) {
            const { item } = e.currentTarget.dataset;
            let obj;

            _request
                .postObj('/stylistCard/card', {
                    stylistId: item.stylistId,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    obj = res.data.data;
                    let newobj = JSON.stringify(obj);
                    uni.navigateTo({
                        url: '/pages/hairstylistdetails/index?hair=' + encodeURIComponent(newobj)
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 退款
        onRefund(e) {
            const { id } = e.currentTarget.dataset;
            uni.showModal({
                content: '点击确认本套餐券将失效，购买金额将原路返回。请确认是否要退款',
                title: '',
                success: (result) => {
                    console.log(result);

                    if (result.confirm) {
                        _request
                            .get('/userCoupon/refundPackageUse', {
                                id: id,
                                userId: uni.getStorageSync('userid')
                            })
                            .then((res) => {
                                if (res.data.code == 200) {
                                    uni.showToast({
                                        title: '套餐券已退款，金额将在24小时内到账。请注意查收',
                                        icon: 'none',
                                        duration: 2000
                                    });
                                    setTimeout(() => {
                                        uni.navigateBack({
                                            delta: 1
                                        });
                                    }, 1000);
                                }
                            })
                            .catch((error) => {
                                console.log(error, 'error');
                            });
                    } else if (result.cancel) {
                    }
                },
                fail: (res) => {},
                complete: (res) => {}
            });
        },

        showPopup() {
            this.setData({
                show: true
            });
        },

        onClose() {
            this.setData({
                show: false
            });
        },

        toHairstylistdetails() {
            console.log('占位：函数 toHairstylistdetails 未声明');
        }
    }
};
</script>
<style>
/* pages/mealdetails/index.wxss */
page {
    background: #fbfbfb;
}

.page {
    padding: 20rpx 20rpx 0 20rpx;
}

/* 背景 */
.bg {
    width: 710rpx;
    height: 342rpx;
}

.bg > image {
    width: 710rpx;
    height: 342rpx;
    z-index: -1;
    position: absolute;
}

.flexbox {
    display: flex;
    justify-content: space-between;
    width: 710rpx;
    height: 342rpx;
    box-sizing: border-box;
    padding: 40rpx;
}

.contentliquid text:nth-child(1) {
    height: 50rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 50rpx;
}

.contentliquid text:nth-child(2) {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    line-height: 50rpx;
}

.text1 {
    height: 56rpx;
    font-size: 40rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 56rpx;
}

.text2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 34rpx;
    margin: 14rpx 0 50rpx 0;
}

.text3 > text:nth-child(1) {
    height: 84rpx;
    font-size: 60rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 56rpx;
}

.money {
    font-size: 40rpx;
    margin-right: 16rpx;
}

.text3 > text:nth-child(2) {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 34rpx;
    margin-left: 24rpx;
}

.text4 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 34rpx;
    margin-top: 82rpx;
    position: absolute;
    right: 20px;
}

.flexright {
    text-align: -webkit-right;
}

.headerbox {
    height: 154rpx;
    width: 154rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header {
    border-radius: 50%;
    background: #ffffff;
    opacity: 0.3;
    z-index: 1;
    height: 154rpx;
    width: 154rpx;
    position: absolute;
}

.headerbox > image {
    width: 128rpx;
    height: 128rpx;
    border-radius: 50%;
    z-index: 3;
}

/* 套餐详情 */
.details {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 30rpx 40rpx;
}

.details .title {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
    margin-bottom: 10rpx;
}

.detailsfelx {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.detailsfelx text:nth-child(1) {
    height: 50rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 50rpx;
    width: 140rpx;
    display: table;
}

.detailsfelx text:nth-child(2) {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    line-height: 50rpx;
}

#textcolor {
    color: red;
}

/* 使用记录 */
.time1 {
    width: 710rpx;
    height: 100rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    text-align: center;
    box-sizing: border-box;
    padding: 0 48rpx 0 40rpx;
    margin-top: 20rpx;
    line-height: 100rpx;
}

.time1 > text:nth-child(1) {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
}

.time1 > text:nth-child(2) {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
}

.time2 {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    padding: 50rpx 28rpx;
    margin-top: 20rpx;
    box-sizing: border-box;
}

.flexbox1,
.flexbox2 {
    display: flex;
    justify-content: space-between;
}

.flexbox1 text:nth-child(1) {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
}

.flexbox1 text:nth-child(2) {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 40rpx;
}

.flexbox2 {
    height: 40rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    line-height: 40rpx;
    margin-top: 10rpx;
}

.flexbox2 text:nth-child(1) {
    font-size: 28rpx;
}

.flexbox2 text:nth-child(2) {
    font-size: 24rpx;
}

.time2 > view:nth-child(2) {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
    margin: 20rpx 0 10rpx 0;
}

.more {
    width: 100%;
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
    text-align: center;
    margin-top: 32rpx;
}

/* 使用说明 */
.explain {
    width: 710rpx;
    height: 854rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 1px rgba(241, 241, 241, 0.4);
    border-radius: 5px;
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 38rpx 48rpx 0 48rpx;
}

.explaintext {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
}

.explaintext1 {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 40rpx;
    margin: 20rpx 0 10rpx 0;
}

.explaintext2 {
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    line-height: 44rpx;
}

/* 提交按钮 */
.btn {
    width: 670rpx;
    height: 84rpx;
    background: #ff8722;
    border-radius: 21px;
    margin: 0 auto;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    line-height: 84rpx;
    margin-bottom: 40rpx;
    margin-top: 28rpx;
}
/* 弹出框样式 */

.popuptext {
    width: 100%;
    text-align: center;
    margin-bottom: 46rpx;
    margin-top: 20rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
}

.close {
    position: absolute;
    top: 26rpx;
    right: 40rpx;
}

.p-30 {
    padding: 0 60rpx;
}

.p-20 {
    height: 74rpx;
}
</style>
